<template>
    <div id="brand">
        <el-form :inline="true" :model="query" size="mini">
            <el-form-item label="商品品牌：">
                <el-input v-model.trim="query.gbname"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button icon='el-icon-search' type="primary" @click="handleCheck">查询</el-button>
                <el-button icon='el-icon-refresh' class="filter-item" @click="handleReset">刷新</el-button>
                <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addgood">添加</el-button>

            </el-form-item>
        </el-form>
        <template>
            <el-table
                    :data="brandData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="序号"
                >
                </el-table-column>
                <el-table-column
                        prop="gbname"
                        label="商品品牌"
                >
                </el-table-column>

                <el-table-column
                        prop="gmtCreate"
                        label="创建时间"
                >
                </el-table-column>
                <el-table-column
                        prop="gmtModified"
                        label="更新时间"
                >
                </el-table-column>

                <el-table-column
                        label="操作"
                        width="400">
                    <template slot-scope="scope">
                        <el-button  type="success" @click="editName(scope.row)" size="mini">编辑</el-button>
                        <el-button  type="danger" @click="del(scope.row.id)" size="small" >删除</el-button>

                    </template>
                </el-table-column>
            </el-table>
            <!--添加-->
            <el-dialog
                    title="添加"
                    :visible.sync="addDialogVisible"
                    width="30%"
            >
                <!--添加的表单的数据绑定-->
                <el-form :model="addSubjectFormData" :rules="addSubjectFormRule" ref="addSubjectFormRef"  label-width="100px" class="demo-ruleForm">
                    <el-form-item label="商品类别:" prop="gbname">
                        <el-input type="text" v-model="addSubjectFormData.gbname" autocomplete="off"></el-input>
                    </el-form-item>

                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addgoods">确 定</el-button>
            </span>
            </el-dialog>


<!--      编辑   -->
            <el-dialog
                    title="修改"
                    :visible.sync="editDialogVisible"
                    width="30%"
            >
                <el-form label-width="100px" :model="editForm" :rules="addSubjectFormRule" ref="editSubjectFormRule">
                    <el-form-item label="商品品牌" prop="gbname">
                        <el-input v-model="editForm.gbname"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editgsForm">确 定</el-button>
                </span>
            </el-dialog>
        </template>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

    </div>
</template>

<script>
    export default {
        name: "brand",
        data(){
            return{
                query:{},
                brandData:[],
                //当前页数
                currentPage:1,
                pageSizes:[5,10,15,20],
                //每页显示的条数
                pageSize:5,
                //总条数
                total:0,
                //编辑
                editForm:{},
                editDialogVisible:false,
                //添加
                addDialogVisible:false,
                addSubjectFormData:{},
                addSubjectFormRule:{
                    gbname:[
                        {required:true,message:"内容不能为空",trigger:"blur"}
                    ]
                }
            }
        },
        created(){
                this.brandFromData()
        },
        methods:{
            //删除
            del(id){
                if (confirm("确定删除吗")) {
                    //console.log(id);
                    this.$http.post("/goods/goodsBrand/delectGoodsBrand/"+id).then(resule => {
                        this.brandFromData();
                        this.$message.success(resule.data.msg)
                    })
                }

            },
                //添加
            addgood(){
                this.addDialogVisible=true
            },
            addgoods(){
                this.$refs["addSubjectFormRef"].validate((valid) => {
                    if (valid) {
                        var that = this
                        this.addDialogVisible = false;
                        this.$http.post(`/goods/goodsBrand/insertGoods`, this.addSubjectFormData).then(function (resp) {
                            //重新加载表格数据
                            that.brandFromData();
                            that.$message.success(resp.data.msg)
                        })
                    }
                })
            },
            //编辑
            editName(row) {
                this.editDialogVisible = true;
                this.editForm = row;
            },
            editgsForm(){
                this.$refs['editSubjectFormRule'].validate((valid) => {
                    if (valid) {
                        this.$http.post('/goods/goodsBrand/updateGoodsBrand', this.editForm).then(resule => {
                            //隐藏编辑弹出层
                            this.editDialogVisible = false;
                            //重新加载表格数据
                            this.brandFromData();
                            this.$message.success(resule.data.msg)
                        })
                    }
                })
            },
            //初始页面分页
            brandFromData() {
                this.$http.post('/goods/goodsBrand/selectAll/'+this.currentPage+"/"+this.pageSize,this.query).then(resule => {
                    //console.log(resule)
                    this.brandData=resule.data.data.records
                     this.total=resule.data.data.total
                })
            },
            //刷新
            handleReset(){
                location.href="/goods/goodsBrand/selectAll"
            },
            // 查询条件
            handleCheck() {
                this.brandFromData();
            },
            //每页显示的条数发生改变时触发
            handleSizeChange(val) {
                this.pageSize=val;
                this.brandFromData();
            },
            //当前页码发生改变时触发
            handleCurrentChange(val) {
                this.currentPage=val;
                this.brandFromData();
            },
        }
    }
</script>

<style scoped>

</style>